<script setup lang="ts">
import { ref, reactive, toRefs, defineAsyncComponent } from "vue";
import { showLoadingToast, closeToast } from "vant";
import { HxqImageUpload } from "vue-mobile-hxq";
interface FormObj {
  imgOne: string[];
  imgTwo: string[];
}
const isRequire = ref(true);
const formData = reactive<FormObj>({
  imgOne: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
  imgTwo: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
});
const { imgOne, imgTwo } = toRefs(formData);

const ImgUpload = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    resolve(HxqImageUpload);
  });
});

function getImgData<T>(val: T, key: string, mode: string): void {
  if (mode == "del") {
    console.log(key);

    formData[key] = val;
  } else {
    let data = {
      file: val,
    };
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
    });
    // uploadfiles(data)
    // 	.then(res => {
    // 		if (res.code === 200) {
    // 			formData[key].push(import.meta.env.VITE_BASE_IMGURL + res.msg);
    // 		}
    // 		closeToast();
    // 	})
    // 	.catch(() => {
    // 		closeToast();
    // 	});
  }
}
</script>
<template>
  <div class="public-flex-box">
    <!-- <div class="public-phone-title">卡片形式</div> -->
    <div class="public-usage-box">
      <div class="padding_15">
        <!-- <iconTitle name="图片上传" /> -->
        <div class="public_form_box">
          <img-upload
            class="padding_X_15 padding_top_10 public_bottom_line"
            name="房屋产权证/租赁协议/拍卖协议"
            :imgData="imgTwo"
            @getImgData="getImgData"
            keyName="imgTwo"
          />
          <img-upload
            class="padding_X_15 padding_top_10 public_bottom_line"
            name="房屋产权证/租赁协议/拍卖协议"
            :max="2"
            :isRequire="isRequire"
            :imgData="imgOne"
            @getImgData="getImgData"
            keyName="imgOne"
          />
        </div>
      </div>
    </div>
  </div>
</template>
